<template>
  <div>

    <van-nav-bar
  title="账号登录"

  left-arrow
  @click-left="onClickLeft"

/>
<van-form @submit="onSubmit">
  <van-field
    v-model="formLongin.username"
    name="用户名"

    placeholder="请输入账号"

  />
  <van-field
    v-model="formLongin.password"
    type="password"
    name="密码"
    placeholder="请输入密码"
  />
  <div style="margin: 16px;">
    <van-button square  block type="primary" native-type="submit" >登录</van-button>
  </div>
</van-form>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Toast } from 'vant'
// import { information } from '@/api'
export default {
  data () {
    return {
      formLongin: {
        username: 'hzhmqd',
        password: '123456',
        // 用户信息
        userInfo: {}
      }
    }
  },
  // // 获取用户信息
  // async created () {
  //   const res = await information()
  //   // console.log(res)
  //   const { body } = res.data
  //   // console.log(body)
  //   this.userInfo = body
  //   console.log(this.userInfo)
  // },
  methods: {
    // 获取挂载在vuex里的方法
    ...mapActions(['asyncLoginAction']),
    // < 返回的方法
    onClickLeft () {
      console.log('返回')
      this.$router.push('/Mine')
    },
    // --- 提交
    async onSubmit () {
      try {
        await this.asyncLoginAction(this.formLongin)
        Toast({
          message: '登录成功',
          icon: 'passed'
        })
        setTimeout(() => {
          this.$router.replace('/Mine')
        }, 1000)
      } catch (err) {
        console.log(err)
        if (this.formLongin.username === '' || this.formLongin.password.length === 0) {
          console.log(1)
          Toast('用户名和密码不能为空~')
          return
        }
        if (this.formLongin.username.length > 8 || this.formLongin.username.length < 5) {
          Toast('账号为5~8之间的英文或数字~')
          return
        }
        if (this.formLongin.password.length > 12 || this.formLongin.password.length < 6) {
          Toast('密码为6~12之间的英文或数字~')
          return
        }
        Toast('登录异常')
      }
    }

  }
}
</script>

<style lang="less" scoped>
 /deep/.van-nav-bar__content {
   background-color: #21b97a;
}
/deep/ .van-nav-bar__title  {
  color: aliceblue;
}
/deep/ .van-icon-arrow-left {
  color: aliceblue;

}
</style>
